<!--公用头部-->
<template>
  <div class="com-header" :class="{'isDetails' : !isDetails}">
    <top-header></top-header>

    <div class="top-nav-box">
      <div class="w1200">
        <smooth-nav
          ref="menuNav"
          class="top-nav "
          :navList="menuNav"
          :navActive="navActive"
          :parameter="['name']"
          @tagsClick="navActiveHandle"
        ></smooth-nav>

        <router-link class="user-centre" to="/admin">个人中心</router-link>
      </div>

    </div>
  </div>
</template>

<script>
let homeRouter = ['index','shop','policy','news']
export default {
  name: "com-header",

  data() {
    return {
      navActive : 0,
      menuNav: [{
        name: "首页",
        url: 'index'
      },{
        name: "大数据商城",
        url: 'shop'
      },{
        name: "新闻动态",
        url: 'news'
      },{
        name: "政策法规",
        url: 'policy'
      },],

      isDetails : true
    }
  },
  watch:{
    // 处理是否为首页展示状态切换
    '$route.name':{
      handler(newV,oldV){
        this.isDetails = homeRouter.includes(newV)
      },
      immediate:true
    }
  },
  computed: {

  },
  mounted() {
    // 刷新更新导航定位
    let routerName = this.$route.meta.navAactive
    if(routerName){
      this.navActive = this.menuNav.findIndex(v=> v.url === routerName)
      this.$refs.menuNav.acListWidth(this.navActive)
    }
  },
  methods: {
    navActiveHandle(obj,index){
      this.navActive = index
      this.$router.push({
        name : obj.url
      })
    },
  },
};
</script>

<style scoped lang="scss">
.com-header{
  background: transparent;
  position: absolute;
  width: 100%;

  .top-nav-box{
    border-bottom: 1px solid rgba(255,255,255,.3);
    .w1200{
      position: relative;
    }
    .user-centre{
      position: absolute;
      right: 0;
      bottom: 8px;
      font-size: 18px;
      color: rgba(255,255,255,.5);
    }
  }
  // 修改顶部导航样式
  .top-nav {
    display: inline-block;
    height: 50px;
    margin: 0px;
    user-select: none;
    ::v-deep li {
      display: inline-block;
      cursor: pointer;
      line-height: 50px;
      margin: 0 20px;
      color: rgba(255,255,255,.5);
      z-index: 99;
      font-size: 18px;
      &:first-child{
        margin-left:0 ;
      }
      &.active{
        color: #fff;
      }
    }

    ::v-deep .smooth-before {
      background: #fff;
      bottom: 0;
      top: inherit;
      height:2px;
      border: none;
      border-radius: 0;
    }
  }
}

.isDetails{
  position: relative;
  box-shadow: 10px 0px 6px rgba(0,0,0,.15);
  // 修改顶部导航样式
  .top{
    color: #666;
  }
  .top-nav {
    display: inline-block;
    height: 50px;
    margin: 0px;
    user-select: none;
    ::v-deep li {
      color: #666666;
      &.active{
        color: #228AFF;
      }
    }

    ::v-deep .smooth-before {
      background: #228AFF;
      bottom: 0;
      top: inherit;
      height:2px;
      border: none;
      border-radius: 0;
    }
  }
  .user-centre{
    color: #666 !important;
  }
}
</style>
